<template>
  <div class="mvs-container">
    <div class="filter-wrap">
      <div class="seciton-wrap">
        <span class="section-type">地区:</span>

        <ul class="tabs-wrap">
          <li class="tab">
            <span class="title" :class="{active:area=='-1'}"   @click="area='-1'" >全部</span>
          </li>
          <li class="tab">
            <span class="title" :class="{active:area=='7'}" @click="area= '7'">华语</span>
          </li>
          <li class="tab">
            <span class="title" :class="{active:area=='96'}" @click="area= '96'">欧美</span>
          </li>
          <li class="tab">
            <span class="title" :class="{active:area=='8'}" @click="area=  '8'">日本</span>
          </li>
          <li class="tab">
            <span class="title" :class="{active:area=='16'}" @click="area= '16'">韩国</span>
          </li>
          <li class="tab">
            <span class="title" :class="{active:area=='0'}" @click="area= '0'">其他</span>
          </li>
        </ul>
      </div>
      <div class="type-wrap">
        <span class="type-type" >类型:</span>
        <ul class="tabs-wrap">
          <li class="tab">
            <span class="title " :class="{active:type=='-1'}"  @click="type='-1'">全部</span>
          </li>
          <li class="tab">
            <span class="title" :class="{active:type=='1'}" @click="type='1'">男歌手</span>
          </li>
          <li class="tab">
            <span class="title" :class="{active:type=='2'}" @click="type='2'">女歌手</span>
          </li>
          <li class="tab">
            <span class="title" :class="{active:type=='3'}" @click="type='3'">乐队</span>
          </li>
          
        </ul>
      </div>
      <div class="order-wrap">
        <span class="order-type">筛选:</span>
        <ul class="tabs-wrap">
<!--          <li class="tab" style="width: 70px">-->
          <li >
            <span class="titles"  :class="{active:initial=='-1'}" @click="initial='-1'">热门</span>
          </li>
          <li class="tab"  >
            <span class="titles"  :class="{active:initial=='A'}" @click="initial='A'">A</span>
          </li>
          <li >
            <span class="titles"  :class="{active:initial=='B'}" @click="initial='B'">B</span>
          </li>
          <li class="tab">
            <span class="titles"  :class="{active:initial=='C'}" @click="initial='C'">C</span>
          </li>
          <li class="tab">
            <span class="titles"   :class="{active:initial=='D'}" @click="initial='D'">D</span>
          </li>
          <li class="tab">
            <span class="titles"  :class="{active:initial=='E'}" @click="initial='E'">E</span>
          </li>
          <li class="tab">
            <span class="titles"  :class="{active:initial=='F'}" @click="initial='F'">F</span>
          </li>
          <li class="tab">
            <span class="titles"  :class="{active:initial=='G'}" @click="initial='G'">G</span>
          </li>
          <li class="tab">
            <span class="titles"  :class="{active:initial=='H'}" @click="initial='H'">H</span>
          </li>
          <li class="tab">
            <span class="titles"  :class="{active:initial=='I'}" @click="initial='I'">I</span>
          </li>
          <li class="tab">
            <span class="titles"  :class="{active:initial=='J'}" @click="initial='J'">J</span>
          </li>
          <li class="tab">
            <span class="titles"  :class="{active:initial=='K'}" @click="initial='K'">K</span>
          </li>
          <li class="tab">
            <span class="titles"  :class="{active:initial=='L'}" @click="initial='L'">L</span>
          </li>
          <li class="tab">
            <span class="titles"  :class="{active:initial=='M'}" @click="initial='M'">M</span>
          </li>
          <li class="tab">
            <span class="titles"  :class="{active:initial=='N'}" @click="initial='N'">N</span>
          </li>
          <li class="tab">
            <span class="titles"  :class="{active:initial=='O'}" @click="initial='O'">O</span>
          </li>
          <li class="tab">
            <span class="titles"  :class="{active:initial=='P'}" @click="initial='P'">P</span>
          </li>
          <li class="tab">
            <span class="titles"  :class="{active:initial=='R'}" @click="initial='R'">R</span>
          </li>
          <li class="tab">
            <span class="titles"  :class="{active:initial=='R'}" @click="initial='R'">R</span>
          </li>
          <li class="tab">
            <span class="titles"  :class="{active:initial=='S'}" @click="initial='S'">S</span>
          </li>
          <li class="tab">
            <span class="titles"  :class="{active:initial=='T'}" @click="initial='T'">T</span>
          </li>
          <li class="tab">
            <span class="titles"  :class="{active:initial=='U'}" @click="initial='U'">U</span>
          </li>
          <li class="tab">
            <span class="titles" :class="{active:initial=='V'}" @click="initial='V'">V</span>
          </li>
          <li class="tab">
            <span class="titles" :class="{active:initial=='W'}" @click="initial='W'">W</span>
          </li>
          <li class="tab">
            <span class="titles" :class="{active:initial=='X'}" @click="initial='X'">X</span>
          </li>
          <li class="tab">
            <span class="titles" :class="{active:initial=='Y'}" @click="initial='Y'">Y</span>
          </li>
          <li class="tab">
            <span class="titles" :class="{active:initial=='Z'}" @click="initial='Z'">Z</span>
          </li>
          <li class="tab">
            <span class="titles" :class="{active:initial=='0'}" @click="initial='0'">0</span>
          </li>

        </ul>


      </div>
    </div>
    <!-- mv容器 -->
    <!-- 推荐MV -->
    <div class="mvs">
      <div class="items">
        <div class="item" v-for="(item,index) in artists" :key="index">
          <div class="img-wrap">
            <img :src="item.picUrl" @click="toSignerDetail(item)" alt="" />
           
          </div>
          <div class="info-wrap">
            <div class="name">{{item.name}}</div>
            <!-- <div class="singer">余恩</div> -->
          </div>
        </div>
      </div>
      <!-- 分页器 -->
        <el-pagination
                background
                :current-page.sync="offset"
                :page-count="50"
                @current-change="handleCurrentChange"
        />

<!--      <el-pagination-->
<!--            @current-change="handleCurrentChange"-->
<!--            background-->
<!--            layout="prev, pager, next"-->
<!--            :total="total"-->
<!--            :current-page.sync="offset"-->
<!--            :page-size="5"-->
<!--            :limit="limit"-->
<!--    >-->
<!--    </el-pagination>-->
    </div>
  

  </div>
</template>

<script>



  export default {
  name: 'singer',
  data() {
    return {

      initial:'-1',
      area:'-1',
      type:'-1',
      listId:null,
      // 总条数
      total: 20,
      // 页码
      page: 1,
      // 页容量
      limit: 30,
      picUrl:"图标",
      artists:[],
      offset:1,

    };
  },
  created(){
    this.ajax()
    this.getPicUrl()
    console.log(this.artists);

  },
  watch:{
      type(){
      this.ajax()
      // console.log(type)
          console.log("type"+this.type)
    },
      area(){
          this.ajax()
          console.log("area"+this.area)
          // console.log(area)
      },
      initial(){
          this.ajax()
          console.log("initial"+this.initial)
                // console.log("initial"+initial)
      }
  },

  methods: {

      ajax(){
          axios({
            url:'https://autumnfish.cn/artist/list',
          // url:'https://autumnfish.cn/top/artists',
          //  https://autumnfish.cn/artist/list
          ///https://autumnfish.cn/artist/detail?id=5781
         
          methods:'get',
          params:{
              type:this.type,
              area:this.area,
              initial:this.initial,
              limit:this.limit,
              offset: this.offset
          }
      //    https://autumnfish.cn/comment/event?threadId=A_EV_2_6559519868_32953014
      }).then(res=>{
          this.artists=res.data.artists
          console.log(res.data.artists)
          
          console.log(this.artists)
      })
      },
      getPicUrl(){
          for(let i of this.artists){
            console.log(i)
              console.log(i.picUrl)
              console.log(i.id)
          }
      },

      toSignerDetail(item){
          // this.$router.push(`/signerdetail?id=${id}`);
          this.$router.push("/signerdetail/"+item.id);
      },
      handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
          this.ajax();
      },

  }
};
</script>

<style >

.index-container .main {
  flex: 1;
  overflow-y: scroll;
  padding: 10px 20px;
}

.index-container .main > div {
  max-width: 1100px;
  margin: 0 auto;
}
</style>
